<template>

  <el-form :inline="true" :model="searchData" class="demo-form-inline">
    <el-form-item label="院校名称">
      <el-input v-model="searchData.colleges" placeholder="院校名称" clearable></el-input>
    </el-form-item>
    <el-form-item label="院校所在地">
      <el-select v-model="searchData.address" placeholder="院校所在地">
        <el-option label="" value="">全部</el-option>
        <el-option :label="item" :value="item" v-for="item in address" :key="item"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="tableData"
      style="width: 100%"
      border
      v-loading="loading"
      @sort-change="sortChangeHandler"
  >
    <el-table-column
        prop="colleges"
        label="院校名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="院校所在地址"
        width="180">
    </el-table-column>
    <el-table-column
        prop="complexSat"
        sortable
        label="综合满意度">
    </el-table-column>
    <el-table-column
        prop="envSat"
        sortable
        label="环境满意度">
    </el-table-column>
    <el-table-column
        prop="lifeSat"
        sortable
        label="生活满意度">
    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="searchData.current"
      :page-size="searchData.size"
      layout="prev, pager, next, jumper"
      :total="searchData.total">
  </el-pagination>
</template>

<script>
import {onBeforeMount, reactive, toRefs} from "vue";
import {collSatInfo, pages} from "@/api/collSat";

export default {
  name: "satisfaction",
  setup(){
    const data = reactive({
      tableData: [],
      address: [],
      searchData: {
        colleges: '',
        address: '',
        current: 1,
        size: 10,
        total: 100,
        orderProp: '',
        order: ''
      },
      loading: false
    })


    const sortChangeHandler = (column) => {
      data.searchData.orderProp = column.prop
      data.searchData.order = column.order

      data.loading = true
      pages(data.searchData).then(res => {
        data.tableData = res.data.records
        data.searchData.total = res.data.total
        data.searchData.size = res.data.size
        data.searchData.current = res.data.current
        data.loading = false
      })
    }

    const handleSizeChange = (val) => {
      data.loading = true
      pages(data.searchData).then(res => {
        data.tableData = res.data.records
        data.searchData.total = res.data.total
        data.searchData.size = res.data.size
        data.searchData.current = res.data.current
        data.loading = false
      })
    }

    const handleCurrentChange = (val) => {
      data.loading = true
      pages(data.searchData).then(res => {
        data.tableData = res.data.records
        data.searchData.total = res.data.total
        data.searchData.size = res.data.size
        data.searchData.current = res.data.current
        data.loading = false
      })
    }

    const onSubmit = () => {
      data.loading = true
      pages(data.searchData).then(res => {
        data.tableData = res.data.records
        data.searchData.total = res.data.total
        data.searchData.size = res.data.size
        data.searchData.current = res.data.current
        data.loading = false
      })
    }

    onBeforeMount(() => {
      collSatInfo().then(res => {
        data.address = res.data.address
      })

      data.loading = true
      pages(data.searchData).then(res => {
        data.tableData = res.data.records
        data.searchData.total = res.data.total
        data.searchData.size = res.data.size
        data.searchData.current = res.data.current
        data.loading = false
      })
    })

    return {
      ...toRefs(data),
      sortChangeHandler,
      handleSizeChange,
      handleCurrentChange,
      onSubmit
    }
  }
}
</script>

<style scoped>

</style>
